:root {
  // Interface color palette
  --back-color: #F5F6FA;
  --back-color-dark: #D7DDF3;
  --fore-color: #404454;
  --fore-color-light: #575E7A;
  --fore-color-lighter: #666E8F;
  --fore-color-dark: #1F253D;
  --fore-color-darker: #060709;

  // Scrollbar
  --scrollbar-back-color: #D7DDF3;
  --scrollbar-fore-color: #666E8F;
  
  // Menu color palette
  --menu-back-color: #FFFFFF;
  --menu-border-color: #E4E6EC;
  --menu-fore-color: #53586A;
  --menu-active-fore-color: #2747C7;

  // Card corner palette
  --beginner-color: #7CB342;
  --intermediate-color: #FFB300;
  --advanced-color: #D66361;

  // Search color palette
  --search-back-color: #FFFFFF;
  --search-fore-color: #0D0E17;
  --search-placeholder-color: #C5C6CD;
  --search-shadow-color: rgba(0, 32, 128, 0.1);
  --search-shadow-focus-color: rgba(0, 32, 128, 0.17);

  // Button color palette
  --button-back-color-a: #3B3EFC;
  --button-back-color-b: #DC325F;
  --button-fore-color: #FFFFFF;
  --button-shadow-color: rgba(0, 0, 0, 0.25);
  --button-shadow-focus-color: rgba(0, 0, 0, 0.29);
  --button-example-toggler-fore-color: #607d8b;

  // Card color palette
  --card-back-color: #FFFFFF;
  --card-fore-color: #212121;
  --card-fore-color-light: #424242;
  --card-shadow-color-a: rgba(240, 242, 247, 0.1);
  --card-shadow-color-b: rgba(0, 32, 128, 0.1);
  
  // Pre & Code color palette
  --pre-fore-color: #e57373;
  --pre-back-color: #1e253d;
  --pre-selected-color: #041248;

  // Token color palette
  --token-color-a: #7f99a5;   // Comments
  --token-color-b: #bdbdbd;   // Punctuation
  --token-color-c: #64b5f6;   // Functions
  --token-color-d: #ff8f00;   // Numbers
  --token-color-e: #c5e1a5;   // Strings
  --token-color-f: #ce93d8;   // Keywords
  --token-color-g: #26c6da;   // Regular expressions
  --token-color-h: #e57373;   // Variables

  // Tag color palette
  --tag-border-color: #D7DDF3;
  --tag-fore-color: #616B8F;

  // Toast color palette
  --toast-back-color: #05A864;
  --toast-fore-color: #FFFFFF;
  --toast-shadow-color: rgba(0, 32, 128, 0.26);

  // Link color palette
  --a-link-color: #0277bd;
  --a-visited-color: #01579b;

  // Code color palette
  --code-fore-color: #0324AB;
  --code-back-color: #EDF0FC;
  --code-selected-color: #BDEDFE;
}

// Dark mode colors
.page-container.dark {
  // Interface color palette
  --back-color: #2A314C;
  --back-color-dark: #8993BE;
  --fore-color: #ABAFBF;
  --fore-color-light: #858CA8;
  --fore-color-lighter: #707899;
  --fore-color-dark: #B4BCD9;
  --fore-color-darker: #FCFCFD;

  // Scrollbar
  --scrollbar-back-color: #434E76;
  --scrollbar-fore-color: #707899;
  
  // Menu color palette
  --menu-back-color: #434E76;
  --menu-border-color: #13151B;
  --menu-fore-color: #959AAC;
  --menu-active-fore-color: #CDD4EF;

  // Card corner palette remains unchanged for consistency

  // Search color palette
  --search-back-color: #434E76;
  --search-fore-color: #E8E9F2;
  --search-placeholder-color: #999EBD;
  --search-shadow-color: rgba(1, 8, 30, 0.24);
  --search-shadow-focus-color: rgba(1, 8, 30, 0.31);

  // Button color palette remains unchanged for consistency

  // Card color palette
  --card-back-color: #434E76;
  --card-fore-color: #F0F0F0;
  --card-fore-color-light: #D6D6D6; // previously C0C0C0, careful
  --card-shadow-color-b: rgba(1, 8, 30, 0.24);

  // Pre & Code color palette remains unchanged for consistency

  // Token color palette remains unchanged for consistency

  // Tag color palette
  --tag-border-color: #2A3765;
  --tag-fore-color: #BEC1CB; // previously 999DAD, careful

  // Toast color palette
  --toast-shadow-color: rgba(1, 8, 30, 0.44);

  // Link color palette
  --a-link-color: #6DC7FD;
  --a-visited-color: #5DB7FE;

  // Code color palette
  --code-fore-color: #d1dafe;
  --code-back-color: #4f5fa0;
  --code-selected-color: #0dbcfb;

}